
<!DOCTYPE html>
<html lang="en" class="loading">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>第三方登陆 - Mr.Song</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="google" content="notranslate" />
    <meta name="keywords" content="Fechin,"> 
    <meta name="description" content="第三方登录
思维引导图

微博登录范例vue登陆页面请求微博登陆接口123456789101112131415161718&amp;lt;template&amp;gt;    &amp;lt;div&amp;gt;       ,"> 
    <meta name="author" content="Mr.Song"> 
    
    <link rel="icon" href="/song_b/img/song.png"> 
    
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">

    
<link rel="stylesheet" href="/song_b/css/diaspora.css">

	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({
              google_ad_client: "ca-pub-8691406134231910",
              enable_page_level_ads: true
         });
    </script>
    <script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
<meta name="generator" content="Hexo 4.2.0"></head>

<body class="loading">
    <span id="config-title" style="display:none">Mr.Song</span>
    <div id="loader"></div>
    <div id="single">
    <div id="top" style="display: block;">
    <div class="bar" style="width: 0;"></div>
    <a class="iconfont icon-home image-icon" href="javascript:;" data-url="https://gitee.com/song_shen_olympic/song_b.git"></a>
    <div title="播放/暂停" class="iconfont icon-play"></div>
    <h3 class="subtitle">第三方登陆</h3>
    <div class="social">
        <div>
            <div class="share">
                <a title="获取二维码" class="iconfont icon-scan" href="javascript:;"></a>
            </div>
            <div id="qr"></div>
        </div>
    </div>
    <div class="scrollbar"></div>
</div>

    <div class="section">
        <div class="article">
    <div class='main'>
        <h1 class="title">第三方登陆</h1>
        <div class="stuff">
            <span>四月 28, 2020</span>
            
  <ul class="post-tags-list" itemprop="keywords"><li class="post-tags-list-item"><a class="post-tags-list-link" href="/song_b/tags/python/" rel="tag">python</a></li></ul>


        </div>
        <div class="content markdown">
            <h1 id="第三方登录"><a href="#第三方登录" class="headerlink" title="第三方登录"></a>第三方登录</h1><hr>
<h2 id="思维引导图"><a href="#思维引导图" class="headerlink" title="思维引导图"></a>思维引导图</h2><p><img src="/bike/wen_img/18.png" alt="aa"></p>
<hr>
<h2 id="微博登录范例"><a href="#微博登录范例" class="headerlink" title="微博登录范例"></a>微博登录范例</h2><h3 id="vue登陆页面请求微博登陆接口"><a href="#vue登陆页面请求微博登陆接口" class="headerlink" title="vue登陆页面请求微博登陆接口"></a>vue登陆页面请求微博登陆接口</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;button @click&#x3D;&#39;sina&#39;&gt;微博登陆&lt;&#x2F;button&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">    methods:&#123;</span><br><span class="line">        sina:function() &#123; </span><br><span class="line">            &#x2F;&#x2F;跳转 </span><br><span class="line">            &#x2F;&#x2F;微博api：https:&#x2F;&#x2F;api.weibo.com&#x2F;oauth2&#x2F;authorize</span><br><span class="line">            &#x2F;&#x2F;client_id：微博开放平台的appid</span><br><span class="line">            &#x2F;&#x2F;redirect_uri：返回的跳转地址</span><br><span class="line">            window.location.href &#x3D; &quot;https:&#x2F;&#x2F;api.weibo.com&#x2F;oauth2&#x2F;authorize?client_id&#x3D;873314913&amp;redirect_uri&#x3D;http:&#x2F;&#x2F;127.0.0.1:8000&#x2F;md_admin&#x2F;weibo&quot;;</span><br><span class="line">            &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="django路由"><a href="#django路由" class="headerlink" title="django路由"></a>django路由</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> myapp.md_user <span class="keyword">import</span> wb_back</span><br><span class="line">urlpatterns = [</span><br><span class="line">    path(<span class="string">'md_admin/weibo/'</span>,wb_back),</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h3 id="django接口"><a href="#django接口" class="headerlink" title="django接口"></a>django接口</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">wb_back</span><span class="params">(request)</span>:</span></span><br><span class="line">    <span class="comment">#接收参数</span></span><br><span class="line">    code = request.GET.get(<span class="string">'code'</span>,<span class="literal">None</span>)</span><br><span class="line">    <span class="comment">#定义token接口地址</span></span><br><span class="line">    url = <span class="string">'https://api.weibo.com/oauth2/access_token'</span></span><br><span class="line">    <span class="comment">#定义参数</span></span><br><span class="line">    re = requests.post(url,data=&#123;</span><br><span class="line">        <span class="string">"client_id"</span>:<span class="string">"873314913"</span>,</span><br><span class="line">        <span class="string">"client_secret"</span>:<span class="string">"01f43512a74bfde158d5b8027726a50a"</span>,</span><br><span class="line">        <span class="string">"grant_type"</span>:<span class="string">"authorization_code"</span>,</span><br><span class="line">        <span class="string">"code"</span>:code,</span><br><span class="line">        <span class="string">"redirect_uri"</span>:<span class="string">"http://127.0.0.1:8000/md_admin/weibo"</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="comment">#换取微薄昵称</span></span><br><span class="line">    res = requests.get(<span class="string">'https://api.weibo.com/2/users/show.json'</span>,params=&#123;<span class="string">'access_token'</span>:re.json()[<span class="string">'access_token'</span>],<span class="string">'uid'</span>:re.json()[<span class="string">'uid'</span>]&#125;)</span><br><span class="line"></span><br><span class="line">    sina_id = <span class="string">''</span></span><br><span class="line">    user_id = <span class="string">''</span></span><br><span class="line">    <span class="comment">#判断是否登陆过</span></span><br><span class="line">    user = User.objects.filter(username=str(res.json()[<span class="string">'name'</span>])).first()</span><br><span class="line">    <span class="keyword">if</span> user:</span><br><span class="line">        <span class="comment">#登陆过就取出id和username</span></span><br><span class="line">        sina_id = user.username</span><br><span class="line">        user_id = user.id</span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        <span class="comment">#没登陆过就将微博名写成username把微博id写成md5加密的密码存入数据库</span></span><br><span class="line">        user = User(username=str(res.json()[<span class="string">'name'</span>]),password=make_password(str(res.json()[<span class="string">'id'</span>])))</span><br><span class="line">        user.save()</span><br><span class="line">        <span class="comment">#因为微博昵称可能会变而微博id不变，所以用password当作查询条件，取出username和id</span></span><br><span class="line">        user = User.objects.filter(password=make_password(str(res.json()[<span class="string">'id'</span>]))).first()</span><br><span class="line">        sina_id = user.username</span><br><span class="line">        user_id = user.id</span><br><span class="line">    <span class="comment">#将username和id发送至前端</span></span><br><span class="line">    <span class="keyword">return</span> redirect(<span class="string">'http://127.0.0.1:8080?sina_id='</span>+str(sina_id)+<span class="string">"&amp;uid="</span>+str(user_id))</span><br></pre></td></tr></table></figure>
<h3 id="vue第三方登陆的接入"><a href="#vue第三方登陆的接入" class="headerlink" title="vue第三方登陆的接入"></a>vue第三方登陆的接入</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  mounted:function()&#123;</span><br><span class="line">        &#x2F;&#x2F;接受第三方参数</span><br><span class="line">        var sina_id &#x3D; this.$route.query.sina_id;</span><br><span class="line">        var user_id &#x3D; this.$route.query.uid;</span><br><span class="line">        &#x2F;&#x2F;判断是否有第三方登陆</span><br><span class="line">        if(sina_id)&#123;</span><br><span class="line">            &#x2F;&#x2F;存入localStorage</span><br><span class="line">            localStorage.setItem(&#39;username&#39;,sina_id)</span><br><span class="line">            localStorage.setItem(&#39;uid&#39;,user_id)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="钉钉第三方扫码登陆"><a href="#钉钉第三方扫码登陆" class="headerlink" title="钉钉第三方扫码登陆"></a>钉钉第三方扫码登陆</h2><h3 id="vue钉钉扫码接口"><a href="#vue钉钉扫码接口" class="headerlink" title="vue钉钉扫码接口"></a>vue钉钉扫码接口</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;钉钉登陆</span><br><span class="line">dingding:function() &#123; </span><br><span class="line">    &#x2F;&#x2F;跳转</span><br><span class="line">    &#x2F;&#x2F;appid为钉钉开放平台应用的appid</span><br><span class="line">    &#x2F;&#x2F;redirect_uri为回调地址</span><br><span class="line">    window.location.href &#x3D; &#39;https:&#x2F;&#x2F;oapi.dingtalk.com&#x2F;connect&#x2F;qrconnect?appid&#x3D;dingoagvulsdkmz3tmutfp&amp;response_type&#x3D;code&amp;scope&#x3D;snsapi_login&amp;state&#x3D;STATE&amp;redirect_uri&#x3D;http:&#x2F;&#x2F;127.0.0.1:8000&#x2F;md_admin&#x2F;dingding&#39;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>
<h3 id="django接口-1"><a href="#django接口-1" class="headerlink" title="django接口"></a>django接口</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> base64</span><br><span class="line"><span class="keyword">import</span> hmac</span><br><span class="line"><span class="keyword">import</span> urllib</span><br><span class="line"></span><br><span class="line"><span class="comment"># 钉钉回调</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">ding_back</span><span class="params">(request)</span>:</span></span><br><span class="line">    code = request.GET.get(<span class="string">'code'</span>)</span><br><span class="line">    t = time.time()</span><br><span class="line">    <span class="comment"># 时间戳  appSecret为钉钉开放平台应用的appsecret</span></span><br><span class="line">    timestamp = str((int(round(t * <span class="number">1000</span>))))</span><br><span class="line">    appSecret = <span class="string">'Neijy8PB_rEoaSKcUHhwz-ddj44_Y_Zt-xJ_RbiXMIy2VMVl6erF_B6ceXvakq0N'</span></span><br><span class="line">    <span class="comment"># 构造签名</span></span><br><span class="line">    signature = base64.b64encode(</span><br><span class="line">        hmac.new(appSecret.encode(<span class="string">'utf-8'</span>), timestamp.encode(<span class="string">'utf-8'</span>), digestmod=hashlib.sha256).digest())</span><br><span class="line">    <span class="comment"># 请求接口，换取钉钉用户名  accessKey为钉钉开放平台应用的appid</span></span><br><span class="line">    payload = &#123;<span class="string">'tmp_auth_code'</span>: code&#125;</span><br><span class="line">    headers = &#123;<span class="string">'Content-Type'</span>: <span class="string">'application/json'</span>&#125;</span><br><span class="line">    res = requests.post(<span class="string">'https://oapi.dingtalk.com/sns/getuserinfo_bycode?signature='</span> + urllib.parse.quote(signature.decode(<span class="string">"utf-8"</span>)) + <span class="string">"&amp;timestamp="</span> + timestamp + <span class="string">"&amp;accessKey=dingoagvulsdkmz3tmutfp"</span>,data=json.dumps(payload), headers=headers)</span><br><span class="line">    res_dict = json.loads(res.text)</span><br><span class="line"> </span><br><span class="line">    user = User.objects.filter(username=str(res_dict[<span class="string">'user_info'</span>][<span class="string">'nick'</span>])).first()</span><br><span class="line"></span><br><span class="line">    username = <span class="string">''</span></span><br><span class="line">    user_id = <span class="string">''</span></span><br><span class="line">    <span class="keyword">if</span> user:</span><br><span class="line">        username = res_dict[<span class="string">'user_info'</span>][<span class="string">'nick'</span>]</span><br><span class="line">        user_id = user.id</span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        User.objects.create(username=str(res_dict[<span class="string">'user_info'</span>][<span class="string">'nick'</span>]), password=<span class="string">''</span>)</span><br><span class="line">        user = User.objects.filter(username=str(res_dict[<span class="string">'user_info'</span>][<span class="string">'nick'</span>])).first()</span><br><span class="line">        username = res_dict[<span class="string">'user_info'</span>][<span class="string">'nick'</span>]</span><br><span class="line">        user_id = user.id</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> redirect(<span class="string">'http://localhost:8080/?username='</span> + str(username) + <span class="string">'&amp;'</span> + <span class="string">'user_id='</span> + str(user_id))</span><br></pre></td></tr></table></figure>

            <!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
            <audio id="audio" loop="1" preload="auto" controls="controls" data-autoplay="true">
                <source type="audio/mpeg" src="">
            </audio>
            
                <ul id="audio-list" style="display:none">
                    
                        
                            <li title='0' data-url='/song_b//img/002.mp3'></li>
                        
                    
                </ul>
            
        </div>
        
    <div id='gitalk-container' class="comment link"
		data-enable='true'
        data-ae='true'
        data-ci=''
        data-cs=''
        data-r=''
        data-o=''
        data-a=''
        data-d='false'
    >查看评论</div>


    </div>
    
        <div class='side'>
			<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#第三方登录"><span class="toc-number">1.</span> <span class="toc-text">第三方登录</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#思维引导图"><span class="toc-number">1.1.</span> <span class="toc-text">思维引导图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#微博登录范例"><span class="toc-number">1.2.</span> <span class="toc-text">微博登录范例</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#vue登陆页面请求微博登陆接口"><span class="toc-number">1.2.1.</span> <span class="toc-text">vue登陆页面请求微博登陆接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#django路由"><span class="toc-number">1.2.2.</span> <span class="toc-text">django路由</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#django接口"><span class="toc-number">1.2.3.</span> <span class="toc-text">django接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vue第三方登陆的接入"><span class="toc-number">1.2.4.</span> <span class="toc-text">vue第三方登陆的接入</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#钉钉第三方扫码登陆"><span class="toc-number">1.3.</span> <span class="toc-text">钉钉第三方扫码登陆</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#vue钉钉扫码接口"><span class="toc-number">1.3.1.</span> <span class="toc-text">vue钉钉扫码接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#django接口-1"><span class="toc-number">1.3.2.</span> <span class="toc-text">django接口</span></a></li></ol></li></ol></li></ol>	
        </div>
    
</div>


    </div>
</div>
</body>

<script src="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>


<script src="//lib.baomitu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="/song_b/js/plugin.js"></script>
<script src="/song_b/js/typed.js"></script>
<script src="/song_b/js/diaspora.js"></script>


<link rel="stylesheet" href="/song_b/photoswipe/photoswipe.css">
<link rel="stylesheet" href="/song_b/photoswipe/default-skin/default-skin.css">


<script src="/song_b/photoswipe/photoswipe.min.js"></script>
<script src="/song_b/photoswipe/photoswipe-ui-default.min.js"></script>


<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>
    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">
        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>






</html>
